<template>
  <el-dialog
      title="新增出库订单"
      :visible="visible"
      @update:visible="closeDialog"
      width="50%"
      :close-on-click-modal="false"
  >
    <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        style="padding: 20px 50px 20px 0"
    >
      <el-form-item label="出库单号" prop="outBoundId">
        <el-input v-model="formData.outBoundId" placeholder="请输入出库单号"></el-input>
      </el-form-item>

      <el-form-item label="出库日期" prop="outcomeDate">
        <el-date-picker
            v-model="formData.outcomeDate"
            type="datetime"
            placeholder="选择出库日期"
            style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="期望发货时间" prop="expectedDeliveryTime">
        <el-date-picker
            v-model="formData.expectedDeliveryTime"
            type="datetime"
            placeholder="选择期望到货时间"
            style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="物流公司ID" prop="logisticId">
        <el-input v-model="formData.logisticId" placeholder="请输入物流公司ID"></el-input>
      </el-form-item>
      <el-form-item label="运输数量" prop="transportQuantity">
        <el-input-number
            v-model="formData.transportQuantity"
            :min="1"
            placeholder="请输入运输数量"
            style="width: 100%;"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="出库人" prop="allocator">
        <el-input v-model="formData.allocator" placeholder="请输入出库人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="起始地" prop="origin">
        <el-input v-model="formData.origin" placeholder="请输入起始地"></el-input>
      </el-form-item>
      <el-form-item label="目的地" prop="destination">
        <el-input v-model="formData.destination" placeholder="请输入目的地"></el-input>
      </el-form-item>
      <el-form-item label="仓库ID" prop="warehouseId">
        <el-input v-model="formData.warehouseId" placeholder="请输入仓库ID"></el-input>
      </el-form-item>
      <el-form-item label="重量" prop="weight">
        <el-input-number
            v-model="formData.weight"
            :min="0"
            placeholder="请输入重量"
            style="width: 100%;"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="重量单位" prop="weightUnit">
        <el-select v-model="formData.weightUnit" placeholder="选择重量单位" style="width: 100%;">
          <el-option label="吨" value="t"></el-option>
          <el-option label="千克" value="kg"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="formData.state" placeholder="选择状态" style="width: 100%;">
          <el-option label="待分配" value="0"></el-option>
          <el-option label="已分配" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生成日期" prop="generatedDate">
        <el-date-picker
            v-model="formData.generatedDate"
            type="datetime"
            placeholder="生成日期"
            style="width: 100%;"
            readonly
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
            type="textarea"
            v-model="formData.remarks"
            placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, watch, onMounted, ref } from "vue";
import { ElMessage } from 'element-plus';

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:visible", "save"],
  setup(props, { emit }) {
    const formRef = ref(null); // 创建对表单的引用

    const defaultFormData = () => ({
      outBoundId: "",
      outcomeDate: null,
      expectedDeliveryTime: null,
      logisticId: "",
      transportQuantity: null,
      allocator: "",
      contactPhone: "",
      origin: "",
      destination: "",
      warehouseId: "",
      weight: null,
      weightUnit: "t",
      state: 0,
      remarks: "",
      generatedDate: new Date(), // 默认值为当前日期
    });

    const formData = reactive(defaultFormData());

    const resetFormData = () => {
      Object.assign(formData, defaultFormData());
    };

    const rules = {
      outBoundId: [{ required: true, message: '请输入出库单号', trigger: 'blur' }],
      outcomeDate: [{ required: true, message: '请选择出库日期', trigger: 'change' }],
      expectedDeliveryTime: [{ required: true, message: '请选择期望发货时间', trigger: 'change' }],
      logisticId: [{ required: true, message: '请输入物流公司ID', trigger: 'blur' }],
      transportQuantity: [{ required: true, message: '请输入运输数量', trigger: 'blur' }],
      allocator: [{ required: true, message: '请输入出库人', trigger: 'blur' }],
      contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
      origin: [{ required: true, message: '请输入起始地', trigger: 'blur' }],
      destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
      warehouseId: [{ required: true, message: '请输入仓库ID', trigger: 'blur' }],
      weight: [{ required: true, message: '请输入重量', trigger: 'blur' }],
      weightUnit: [{ required: true, message: '请选择重量单位', trigger: 'change' }],
      state: [{ required: true, message: '请选择状态', trigger: 'change' }],
      generatedDate: [{ required: true, message: '生成日期不能为空', trigger: 'change' }],
    };

    watch(
        () => props.data,
        (newData) => {
          if (props.visible) {
            // 确保 generatedDate 不会被覆盖
            const { generatedDate, ...restData } = newData;
            Object.assign(formData, defaultFormData(), restData);
          }
        },
        { immediate: true }
    );

    watch(
        () => props.visible,
        (visible) => {
          if (!visible) {
            resetFormData();
          }
        }
    );

    const closeDialog = () => {
      emit("update:visible", false);
    };

    const save = () => {
      if (formRef.value) {
        formRef.value.validate((valid) => {
          if (valid) {
            emit("save", formData);
          } else {
            console.log('表单验证失败');
            ElMessage.error('表单验证失败，请检查输入'); // 可选：显示错误提示
            return false;
          }
        });
      }
    };

    onMounted(() => {
      if (props.visible) {
        Object.assign(formData, defaultFormData(), props.data || {});
      }
    });

    return {
      formData,
      rules,
      closeDialog,
      save,
      formRef
    };
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
